<template>
    <div>
        <!--以下的网站首页的导航栏-->
        <MyNavBar></MyNavBar>
        <div class="container">
            <!--以下是网站首页的轮播组件-->
            <MyCarousel></MyCarousel>
            <div class="container-subject">
                <br>
                <!--以下是首页最新文章-->
                <MyTopicSubject></MyTopicSubject>
                <br>
                <!--以下是首页最新教程-->
                <MyTopicCourse></MyTopicCourse>
                <br>
            </div>
        </div>
        <!--以下是首页页脚-->
        <MyFooter></MyFooter>
    </div>
</template>

<script>
    import MyNavBar from "@/components/pc/MyNavBar";
    import MyCarousel from "@/components/pc/MyCarousel";
    import MyTopicSubject from "@/components/pc/MyTopicSubject";
    import MyTopicCourse from "@/components/pc/MyTopicCourse";
    import MyFooter from "@/components/pc/MyFooter";

    export default {
        name: "Index",
        components: {
            MyNavBar,
            MyCarousel,
            MyTopicSubject,
            MyTopicCourse,
            MyFooter
        },
        data() {
            return {}
        },
        mounted() {
        },

        methods: {}

    }
</script>

<style scoped>
    .container {
        width: 100%;
        background-color: #fafafa;
    }

    .container-subject {
        width: 80%;
        background-color: #fafafa;
        margin: 0px auto;

    }
</style>